<template>
	<section class="wrap">
		<div class="pb10" :class="curQuota.upDropSpeed<0?'bggreen':'bgred'">
			<Cap :showTeach="()=>teach=true"/>
			<QuotaBar/>
		</div>
		<NavBar/>
		<Chart/>
		<div class="bgwhite">
            <StatusBar/>
		    <Buy v-if='userInfo.userPhone'/>
        </div>
		<Cart v-if='userInfo.userPhone' />
		<transition name="slide-fade1">
			<Teach id="teach" v-show="teach" :hideTeach="()=>teach=false"/>
		</transition>
	</section>
</template>
<script>
import Chart from '@views/chart/index.vue'
import Cap from './subPage/cap'
import NavBar from './subPage/navBar'
import Teach from './subPage/teach'
import QuotaBar from './subPage/quotaBar'
import Buy from './cart/buy'
import Cart from './cart/cart'
import StatusBar from './subPage/statusBar'
import { mapState, mapMutations } from 'vuex'
import storage from '@/tools/storage.js'
import { quotaQuotaGetQuotaDataAllByWeb } from '@api/quota.js'
export default {
	name: 'Trade',
	data() {
		return {
			loading: false,
			timer: null,
			step: 500,
			teach: false
		}
	},
	components: {
		Cap,
		NavBar,
		Teach,
		QuotaBar,
		Chart,
		StatusBar,
		Cart,
		Buy,
	},
	computed: {
		...mapState(['full', 'gold', 'userInfo', 'curQuota', 'tradeTime', 'curVariety'])
	},
	created() {
		var curVariety = JSON.parse(storage.getItem('curVariety'))
		this.$store.commit('setCurVariety', curVariety)
	},
	methods: {
		...mapMutations(['setCurQuota']),
		getQuota() {
			if (this.curVariety.contractsCode) {
				this.$store
					.dispatch('getCurQuota', {
						contractsCode: this.curVariety.contractsCode
					})
					.then(res => {
						clearTimeout(this.timer)
						if (this && this._isDestroyed) return
						this.timer = setTimeout(() => {
							this.getQuota()
						}, this.step)
					})
			} else {
				;('未得到curVariety')
			}
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	watch: {
		gold(newer, older) {
			this.$store.dispatch('getPeizi', {
				varietyId: this.curVariety.varietyId,
				modeId: 1, //base1 high2
				payType: this.gold ? 0 : 1 //实盘1 模拟0
			})
			this.$store.dispatch('getPeizi', {
				varietyId: this.curVariety.varietyId,
				modeId: 2, //base1 high2
				payType: this.gold ? 0 : 1 //实盘1 模拟0
			})
		},
		curVariety(newer, older) {
			this.$store.dispatch('getTradeTime', {
				exchangeId: this.curVariety.exchangeId,
				varietyType: this.curVariety.varietyType
			})
			clearTimeout(this.timer)
			// 有了新的行情之后再查询配资，不然挂单和高级会价格错误
			this.$store
				.dispatch('getCurQuota', {
					contractsCode: this.curVariety.contractsCode
				})
				.then(res => {
					this.step = 500
					this.getQuota()
					this.$store.dispatch('getPeizi', {
						varietyId: this.curVariety.varietyId,
						modeId: 1, //base1 high2
						payType: this.gold ? 0 : 1 //实盘1 模拟0
					})
					this.$store.dispatch('getPeizi', {
						varietyId: this.curVariety.varietyId,
						modeId: 2, //base1 high2
						payType: this.gold ? 0 : 1 //实盘1 模拟0
					})
				})
			const code = this.curVariety.contractsCode
			if (!newer.exchangeStatus) {
				setTimeout(() => {
					if (this.curVariety.contractsCode === code && !this.tradeTime.exchangeStatus) {
						this.step = 15000
					} else {
						this.step = 500
					}
				}, 10000)
			}
		}
	}
}
</script>
<style scoped lang='scss'>
.wrap {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

#teach {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	left: 0;
	top: 0;
	overflow-y: scroll;
}

.user .log {
	width: rem(98px);
	background: linear-gradient(90deg, #ffba00, #ff9000);
	border-radius: rem(4px);
	display: inline-block;
}
.user .reg {
	width: rem(98px);
	border-radius: rem(4px);
	display: inline-block;
	background: linear-gradient(90deg, #ff6c47, #ff3c4b);
}

.slide-fade1-enter-active {
	transition: all 0.3s ease;
}
.slide-fade1-leave-active {
	transition: all 0.3s ease;
}
.slide-fade1-enter,
.slide-fade1-leave-to {
	transform: translateX(rem(400px));
}
</style>